Ext.namespace('Ext.chloroform');

Ext.chloroform.MultiChoiceField = Ext.extend(Ext.form.TriggerField, {
    /**
     * @cfg {Ext.data.Store} datastore
     * This data store contains items that can be selected by the user. Each record is a triplet consisting of
     * value, title and description. The data source must define the field vector ['value', 'title', 'description'].
     */
    datastore: null,

    initComponent : function() {
        Ext.chloroform.MultiChoiceField.superclass.initComponent.call(this);
    },

    initEvents: function() {
        Ext.chloroform.MultiChoiceField.superclass.initEvents.call(this);
    },

    getValue : function() {
        return Ext.chloroform.MultiChoiceField.superclass.getValue.call(this);
    },

    setValue : function(val) {
        return Ext.chloroform.MultiChoiceField.superclass.setValue.call(this, val);
    },

    onTriggerClick : function() {
        if (this.disabled) {
            return;
        }

        var sourceDs = new Ext.data.ArrayStore({
            idIndex: 0,
            data: [],
            fields: ['value', 'title', 'description']
        });

        var targetDs = new Ext.data.ArrayStore({
            idIndex: 0,
            data: [],
            fields: ['value', 'title', 'description']
        });

        //['value', 'title', 'description']
        if (this.menu == null) {
            var m = new Ext.menu.Menu({
                style: {
                    overflow: 'visible'     // For the Combo popup
                },
                items: [
                    {
                        xtype: 'itemselector',
                        name: 'itemselector',
                        fieldLabel: 'ItemSelector',
                        imagePath: '../../extjs/examples/ux/images/',
                        multiselects: [
                            {
                                width: 250,
                                height: 200,
                                store: sourceDs,
                                displayField: 'title',
                                valueField: 'value'
                            },
                            {
                                width: 250,
                                height: 200,
                                store: targetDs,
                                displayField: 'title',
                                valueField: 'value',
                                tbar:[
                                    {
                                        text: 'clear',
                                        handler:function() {
                                            var is = m.find('itemselector')[0];
                                            is.reset();
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });

            var isel = m.find('itemselector')[0];
            var curVal = this.getValue();
            if (!Ext.isArray(curVal)) {
                if (curVal == "") {
                    curVal = [];
                } else {
                    curVal = curVal.split(",");
                }
            }

            // Fill the source store with all items. It is filtered in the following cycle.
            var allItems = this.datastore.getRange();
            sourceDs.add(allItems);

            Ext.each(curVal, function(item, index) {
                var rec = this.datastore.getById(item);
                sourceDs.remove(rec);
                targetDs.add([rec]);
            }, this);

            this.menu = m;
            this.menu.on('hide', this.onMenuHide, this);
            
        }

        this.menu.show(this.el, "tl-bl?");

    },

    validateBlur : function(e){
        return false;
    },

    onMenuHide: function() {
        var isel = this.menu.find('itemselector')[0];
        var val = isel.getValue();
        //alert("onMenuHide:" + isel.getValue());
        this.setValue(val);
        //this.focus(false, 60);
        this.fireEvent('select', this, val);
        this.triggerBlur();
        //this.menuEvents('un');
    }


});

Ext.reg('multichoicefield', Ext.chloroform.MultiChoiceField);